<!--
 * @Author: zhangyun
 * @Date: 2021-04-25 13:55:29
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-28 10:41:28
 * @Desc: 
-->
<template>
  <div class="project">
    <header class="flex py-4">
      <i class="iconfont text-blue-600 text-3xl mr-6" :class="icon"></i>
      <h3 class="text-3xl font-black">{{ title }}</h3>
    </header>
    <section class="grid grid-cols-2 gap-4">
      <Items
        v-for="item of items"
        :key="item.id"
        :title="item.title"
        :views="item.views"
        :updateTime="item.updateTime"
      />
    </section>
    <button
      class="bg-white rounded-full w-32 h-10 text-ms text-gray-500 font-black my-12 text-center block container mx-auto focus:outline-none"
    >
      查看更多...
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import Items from './Items.vue'

interface itemsProps {
  img: string
  title: string
  updateTime: string
  views: number
  (recommend: []): string
}

export default defineComponent({
  name: 'Project',
  components: { Items },
  props: {
    icon: {
      type: String,
      require: false,
    },
    title: {
      type: String,
      require: false,
      default: 'title',
    },
    items: {
      type: Array as PropType<Array<any>>,
      require: false,
    },
  },
  setup() {},
})
</script>

<style></style>
